<template>
    <div ref="eventPopup" id="popup" class="ol-popup">
        <el-card>
            <template #header>
                <div class="title">
                    <span>事件状态更新</span>
                    <span class="close" @click="closePopup">X</span>
                </div>
            </template>
            <el-table :data="attrData" :show-header="false">
                <el-table-column prop="name" width="120"> </el-table-column>
                <el-table-column prop="value">
                    <template #default="{ row }">
                        <el-select
                            v-if="row.name === '处理状态'"
                            v-model="row.value"
                        >
                            <el-option label="待处理" value="0" />
                            <el-option label="处理中" value="1" />
                            <el-option label="已处理" value="2" />
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <el-button type="primary" @click="handleChange">更新</el-button>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { createPopup } from "@/api/ol-api/popup";
import { onMounted, getCurrentInstance, ref } from "vue";
import { Point } from "@/api/mapgis-api/Point";

//声明事件
const emit = defineEmits("updateSuccess");
const eventPopup = ref(null);
// 关闭弹窗
const closePopup = () => {
    setPopup({ position: undefined, data: null, ids: [] });
};

//事件id
let featureIds = [];
//表格数据
const attrData = ref([
    {
        name: "事件编号",
        type: "string",
        value: "111",
    },
    {
        name: "事件类型",
        type: "string",
        value: "111",
    },
    {
        name: "事件等级",
        type: "short",
        value: 1,
    },
    {
        name: "发生时间",
        type: "string",
        value: "111",
    },
    {
        name: "发生地点",
        type: "string",
        value: "111",
    },
    {
        name: "车牌号",
        type: "string",
        value: "111",
    },
    {
        name: "驾驶员",
        type: "string",
        value: "111",
    },
    {
        name: "处理状态",
        type: "short",
        value: 2,
    },
]);

let map = null;
let popup = null;

const service = {
    docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
    layerId: 2,
};

const colorMap = {
    0: "6", //待处理
    1: "4", //处理中
    2: "90",
};

// 事件状态更新事件
const handleChange = () => {
    //获取mapgis图层
    const docLayer = map
        .getLayers()
        .getArray()
        .find((layer) => {
            return layer.get("name") === "guanggu";
        });
    //事件处理状态
    const status = attrData.value.find(
        (item) => item.name === "处理状态"
    ).value;
    //更新事件属性
    Point.update({
        attr: attrData.value,
        service,
        docLayer,
        featureIds: featureIds,
        color: colorMap[status],
    });
    //触发更新成功事件，通知父组件,更新图层状态
    emit("updateSuccess", {
        id: featureIds[0],
        status,
    });
    //关闭弹窗
    closePopup();
};

onMounted(() => {
    const { proxy } = getCurrentInstance();
    map = proxy.$map;
    //创建弹窗
    popup = createPopup({ container: eventPopup.value, map });
});

/**
 * 设置弹窗信息
 * @param {Object} position 位置
 * @param {Object} data 点击要素的属性数据内容 对应表格显示的数据
 * @param {Array} ids 要素id
 */
const setPopup = ({ position, data = [], ids }) => {
    // console.log(position, data, featureIds, "setPopup");
    //设置弹窗位置,如果没有位置信息则不显示弹窗，无需更新数据
    popup.setPosition(position);
    if (position === undefined || position === null) {
        return;
    }
    //更新弹窗信息
    attrData.value = attrData.value.map((item) => {
        return {
            ...item,
            value: data[item.name],
        };
    });
    //更新事件id
    featureIds = ids;
};

defineExpose({
    setPopup,
});
</script>

<style lang="scss" scoped>
.ol-popup {
    box-sizing: border-box;
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;
    z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 50%;
    transform: translateX(-50%);
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "✖";
}
p {
    padding: 5px 20px;
}

.title {
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(to right, #283c86, #45a247);
    .close {
        cursor: pointer;
    }
}
:deep(.el-card__header) {
    padding: 0;
}
:deep(.el-card__body) {
    padding: 0;
}
.footer {
    margin: 10px 10px;
}
</style>
